<!--
 * @Author       : 哈喽 1599321283@qq.com
 * @Date         : 2025-03-16 21:45
 * @LastEditors  : 哈喽 1599321283@qq.com
 * @LastEditTime : 2025-03-16 21:45
 * @FilePath     : /练习/aaa/src/views/membership/index.vue
 * @Description  : 会员中心
-->
<template>
  <div class="membership-container">
    <!-- 顶部导航 -->
    <div class="nav-header glass-effect">
      <van-icon name="arrow-left" size="24" @click="goBack" />
      <h2>会员中心</h2>
      <div class="placeholder"></div>
    </div>
    
    <!-- 会员状态卡片 -->
    <div class="user-card glass-effect">
      <div class="user-info">
        <div class="avatar-wrapper">
          <div class="avatar">{{ nameInitials }}</div>
          <div v-if="isVip" class="vip-badge">VIP</div>
        </div>
        <div class="info">
          <h3>{{ userName || '游客' }}</h3>
          <p v-if="isVip" class="vip-text">
            <van-icon name="gem-o" />
            <span>{{ vipInfo.level }} · {{ vipInfo.expireText }}</span>
          </p>
          <p v-else>尚未开通会员</p>
        </div>
      </div>
      
      <div v-if="isVip" class="vip-progress">
        <div class="progress-info">
          <span>本月免费算命次数</span>
          <span>{{ vipInfo.usedCount }}/{{ vipInfo.totalCount }}</span>
        </div>
        <van-progress
          :percentage="progressPercentage"
          :stroke-width="8"
          color="linear-gradient(to right, #8b5cf6, #c4b5fd)"
        />
      </div>
    </div>
    
    <!-- 会员权益 -->
    <div class="benefits-section">
      <h3 class="section-title">会员特权</h3>
      <div class="benefits-list glass-effect">
        <div v-for="benefit in memberBenefits" :key="benefit.id" class="benefit-item">
          <div class="benefit-icon">
            <van-icon :name="benefit.icon" size="24" />
          </div>
          <div class="benefit-info">
            <h4>{{ benefit.title }}</h4>
            <p>{{ benefit.desc }}</p>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 会员套餐选择 -->
    <div class="plans-section">
      <h3 class="section-title">会员套餐</h3>
      <div class="plans-list">
        <div
          v-for="plan in membershipPlans"
          :key="plan.id"
          class="plan-card glass-effect"
          :class="{ 'active-plan': selectedPlan === plan.id }"
          @click="selectPlan(plan.id)"
        >
          <div class="plan-header">
            <h4>{{ plan.name }}</h4>
            <div v-if="plan.tag" class="plan-tag">{{ plan.tag }}</div>
          </div>
          <div class="plan-price">
            <span class="price-symbol">¥</span>
            <span class="price-value">{{ plan.price }}</span>
            <span class="price-original" v-if="plan.originalPrice">¥{{ plan.originalPrice }}</span>
          </div>
          <div class="plan-period">{{ plan.period }}</div>
        </div>
      </div>
    </div>
    
    <!-- 支付按钮 -->
    <div class="payment-action">
      <van-button 
        block 
        round 
        type="primary" 
        class="pay-button"
        :disabled="!selectedPlan"
        @click="handlePayment"
      >
        {{ payButtonText }}
      </van-button>
      <p class="agreement-text">点击支付即表示您同意<span @click="showTerms">《会员服务协议》</span></p>
    </div>
    
    <!-- 协议弹窗 -->
    <van-popup
      v-model:show="showAgreement"
      round
      position="bottom"
      :style="{ height: '70%' }"
    >
      <div class="agreement-popup">
        <div class="popup-header">
          <h3>会员服务协议</h3>
          <van-icon name="cross" @click="showAgreement = false" />
        </div>
        <div class="popup-content">
          <p>尊敬的用户，欢迎您使用我们的会员服务！</p>
          <p>本协议是您与本平台关于会员服务的各项条款。请您在购买会员服务前，仔细阅读本协议的全部内容。</p>
          
          <h4>一、服务内容</h4>
          <p>1.1 会员服务包括但不限于：高级算命服务、每日运势推送、专属客服等特权。</p>
          <p>1.2 会员服务的具体内容以平台实际提供为准，平台有权根据实际情况调整服务内容。</p>
          
          <h4>二、会员费用</h4>
          <p>2.1 会员服务为付费服务，用户需支付相应费用获取会员资格。</p>
          <p>2.2 会员费用一经支付，除法律规定的情形外，不予退还。</p>
          
          <h4>三、会员期限</h4>
          <p>3.1 会员有效期自用户成功支付会员费用并激活会员身份之日起计算。</p>
          <p>3.2 会员到期后，相关权益将自动失效。用户可选择续费以继续享受会员服务。</p>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script setup lang="ts" name="Membership">
import { computed, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { showToast } from "vant";

const router = useRouter();

// 用户信息（模拟数据，实际应从登录状态获取）
const userName = ref("张三");
const nameInitials = computed(() => {
  if (!userName.value) return "?";
  return userName.value.substring(0, 1);
});

// 会员状态（模拟数据，实际应从接口获取）
const isVip = ref(false);
const vipInfo = reactive({
  level: "黄金会员",
  expireDate: new Date("2025-06-30"),
  expireText: "2025年06月30日到期",
  usedCount: 3,
  totalCount: 10
});

// 计算进度条百分比
const progressPercentage = computed(() => {
  return Math.floor((vipInfo.usedCount / vipInfo.totalCount) * 100);
});

// 会员权益
const memberBenefits = [
  {
    id: 1,
    title: "高级算命服务",
    desc: "解锁所有高级算命功能，获取更深度的命盘解析",
    icon: "gem-o"
  },
  {
    id: 2,
    title: "每日运势推送",
    desc: "每日接收个性化运势推送，提前规划生活与工作",
    icon: "clock-o"
  },
  {
    id: 3,
    title: "无限查看历史",
    desc: "无限期保存并查看历史算命记录，追踪运势变化",
    icon: "records"
  },
  {
    id: 4,
    title: "专属客服咨询",
    desc: "享受一对一专业客服解答，为您解决各类问题",
    icon: "service-o"
  }
];

// 会员套餐
const membershipPlans = [
  {
    id: 1,
    name: "月度会员",
    price: 28,
    originalPrice: 38,
    period: "30天有效期",
    tag: null
  },
  {
    id: 2,
    name: "季度会员",
    price: 68,
    originalPrice: 98,
    period: "90天有效期",
    tag: "推荐"
  },
  {
    id: 3,
    name: "年度会员",
    price: 198,
    originalPrice: 298,
    period: "365天有效期",
    tag: "超值"
  }
];

// 选中的套餐
const selectedPlan = ref(2); // 默认选中季度会员

// 支付按钮文案
const payButtonText = computed(() => {
  if (!selectedPlan.value) return "请选择套餐";
  
  const plan = membershipPlans.find(p => p.id === selectedPlan.value);
  if (plan) {
    return `立即支付 ¥${plan.price}`;
  }
  
  return "立即支付";
});

// 协议弹窗
const showAgreement = ref(false);

// 选择套餐
const selectPlan = (planId) => {
  selectedPlan.value = planId;
};

// 显示协议
const showTerms = () => {
  showAgreement.value = true;
};

// 处理支付
const handlePayment = () => {
  if (!selectedPlan.value) {
    showToast("请选择会员套餐");
    return;
  }
  
  // 这里应该调用实际的支付接口
  // 模拟支付成功
  showToast("支付成功");
  isVip.value = true;
};

// 返回上一页
const goBack = () => {
  router.back();
};
</script>

<style lang="less" scoped>
.membership-container {
  min-height: 100vh;
  padding: 16px;
  background: linear-gradient(135deg, #1a103c 0%, #2d1b4e 100%);
  color: #fff;
}

.nav-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  margin-bottom: 20px;
  border-radius: 12px;
  
  h2 {
    margin: 0;
    font-size: 18px;
    color: #fff;
  }
  
  .placeholder {
    width: 24px;
  }
}

.user-card {
  padding: 20px;
  border-radius: 16px;
  margin-bottom: 24px;
  overflow: hidden;
  position: relative;
  
  &::after {
    content: "";
    position: absolute;
    top: -80px;
    right: -80px;
    width: 160px;
    height: 160px;
    background: radial-gradient(circle, rgba(196, 181, 253, 0.2) 0%, rgba(196, 181, 253, 0) 70%);
    z-index: 0;
  }
  
  .user-info {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
    
    .avatar-wrapper {
      position: relative;
      margin-right: 16px;
      
      .avatar {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
        font-size: 24px;
        font-weight: bold;
      }
      
      .vip-badge {
        position: absolute;
        right: -5px;
        bottom: -2px;
        background: linear-gradient(90deg, #f59e0b 0%, #f87171 100%);
        color: #fff;
        font-size: 12px;
        padding: 2px 6px;
        border-radius: 10px;
        font-weight: bold;
      }
    }
    
    .info {
      h3 {
        margin: 0 0 8px 0;
        font-size: 18px;
      }
      
      p {
        margin: 0;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.7);
        display: flex;
        align-items: center;
        
        .van-icon {
          margin-right: 4px;
          color: #f59e0b;
        }
      }
      
      .vip-text {
        color: #f59e0b;
      }
    }
  }
  
  .vip-progress {
    position: relative;
    z-index: 1;
    
    .progress-info {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      margin-bottom: 8px;
      color: rgba(255, 255, 255, 0.8);
    }
  }
}

.section-title {
  font-size: 18px;
  margin: 24px 0 16px;
  color: #c4b5fd;
}

.benefits-list {
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 24px;
  
  .benefit-item {
    display: flex;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    
    &:last-child {
      border-bottom: none;
    }
    
    .benefit-icon {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: rgba(139, 92, 246, 0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 16px;
      
      .van-icon {
        color: #c4b5fd;
      }
    }
    
    .benefit-info {
      flex: 1;
      
      h4 {
        margin: 0 0 4px 0;
        font-size: 16px;
      }
      
      p {
        margin: 0;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.7);
      }
    }
  }
}

.plans-list {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
  overflow-x: auto;
  padding-bottom: 8px;
  
  &::-webkit-scrollbar {
    display: none;
  }
  
  .plan-card {
    flex: 0 0 auto;
    width: calc(33.33% - 8px);
    padding: 16px;
    border-radius: 16px;
    margin-right: 12px;
    transition: all 0.3s ease;
    position: relative;
    
    &:last-child {
      margin-right: 0;
    }
    
    .plan-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
      
      h4 {
        margin: 0;
        font-size: 16px;
      }
      
      .plan-tag {
        font-size: 12px;
        padding: 2px 6px;
        border-radius: 10px;
        background: linear-gradient(90deg, #f59e0b 0%, #f87171 100%);
        color: #fff;
      }
    }
    
    .plan-price {
      display: flex;
      align-items: baseline;
      margin-bottom: 8px;
      
      .price-symbol {
        font-size: 14px;
        margin-right: 2px;
      }
      
      .price-value {
        font-size: 24px;
        font-weight: bold;
      }
      
      .price-original {
        font-size: 14px;
        color: rgba(255, 255, 255, 0.5);
        margin-left: 8px;
        text-decoration: line-through;
      }
    }
    
    .plan-period {
      font-size: 14px;
      color: rgba(255, 255, 255, 0.7);
    }
  }
  
  .active-plan {
    background: rgba(139, 92, 246, 0.2);
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(139, 92, 246, 0.2);
    border: 1px solid rgba(196, 181, 253, 0.3);
  }
}

.payment-action {
  margin-bottom: 40px;
  
  .pay-button {
    background: linear-gradient(90deg, #8b5cf6 0%, #6d28d9 100%);
    border: none;
    font-size: 16px;
    height: 48px;
    margin-bottom: 12px;
  }
  
  .agreement-text {
    text-align: center;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    
    span {
      color: #c4b5fd;
    }
  }
}

.agreement-popup {
  padding: 20px;
  
  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #eee;
    
    h3 {
      margin: 0;
      font-size: 18px;
    }
  }
  
  .popup-content {
    height: calc(70vh - 80px);
    overflow-y: auto;
    
    h4 {
      margin: 20px 0 10px;
      font-size: 16px;
    }
    
    p {
      margin: 10px 0;
      font-size: 14px;
      line-height: 1.6;
      color: #666;
    }
  }
}

/* 玻璃拟态效果 */
.glass-effect {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
</style> 